<template>
  <div>
    <el-tabs type="card">
      <el-tab-pane label="活动审核">
        <el-table
            ref="singleTable"
            :border="true"
            :data="activityToAuditList"
            highlight-current-row
            max-height="660"
            style="width: 100%"
        >
          <el-table-column
              label="序号"
              type="index"
              width="50"
          />

          <el-table-column label="活动主图" width="130">
            <template slot-scope="scope">
              <el-image :src="scope.row.imagePath"/>
            </template>
          </el-table-column>
          <el-table-column
              :resizable="true"
              label="活动名称"
          >
            <template slot-scope="scope">
              <span>
                {{ scope.row.activityName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
              :resizable="true"
              label="活动内容"
              prop="activityDisc"
          />
          <el-table-column
              label="招募人数"
              prop="activityRecruitPeople"
          />
          <el-table-column
              label="创建时间"
              prop="activityCreatedate"
          />
          <el-table-column label="是否收费" width="50">
            <template slot-scope="scope">
              <span v-if="scope.row.activityMoney > 0"
              >{{ scope.row.activityMoney }}元</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column
              :fit="true"
              :resizable="true"
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="success"
                  @click="handleAgree(scope.row.activityId)"
                  plain
              >同意
              </el-button>

              <el-button
                  slot="reference"
                  size="mini"
                  type="danger"
                  @click="option.action.refuse = true;option.action.id=scope.row.activityId"
                  plain
              >拒绝
              </el-button>

              <!-- todo 修改活动信息-->
              <el-button
                  slot="reference"
                  size="mini"
                  type="warning"
                  @click="toEditActivity(scope.row)"
                  plain
              >修改
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            :current-page="currentPage"
            :page-size="currentPageSize"
            :page-sizes="[10, 50, 100, 500, 1000, 99999]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleGetBySizeActivity"
            @current-change="handleGetByNumActivity"
        />
      </el-tab-pane>
      <el-dialog :visible.sync="option.action.refuse" title="请输入拒绝原因">
        <el-input v-model="refuseReason" placeholder="请输入拒绝原因" type="textarea"></el-input>
        <span slot="footer">
          <el-button @click="handleDelay(option.action.id)">确认</el-button>
          <el-button @click="option.action.refuse=false">取消</el-button>
        </span>
      </el-dialog>
    </el-tabs>
  </div>
</template>

<script>

export default {
  data () {
    return {
      activityToAuditList: [],
      currentPage: 1,
      currentPageSize: 10,
      total: 0,
      option: {
        action: {
          id: null,
          refuse: false,
        },
        infoShow: false,
      },
      refuseReason: "",
    };
  },
  components: {},
  mounted () {
    this.handleGetByNumActivity(1);
  },
  methods: {
    // 格式化基本数据
    async handleGetBySizeActivity (size) {
      this.currentPageSize = size;
      await this.handleGetActivity();
    },

    async handleGetActivityInfo (params) {
      this.articleContentshow = true;
      //   获取活动信息
    },
    // 分页查询全部活动
    async handleGetByNumActivity (num) {
      this.currentPage = num;
      await this.handleGetActivity();
    },
    // 分页查询全部待审核活动
    async handleGetActivity () {
      const res = await this.$http.activityGetToAudit({
        pageNum: this.currentPage,
        pageSize: this.currentPageSize,
      });
      this.activityToAuditList = res.data.list;
      this.total = res.data.totalCount;
    },
    async handleAgree (e) {
      const res = await this.$http.manager_auditActivity({
        id: e,
        status: 1,
      });
      if (res.code !== 0) return null;
      this.$router.go(0);
    },
    async handleDelay (e) {
      const res = await this.$http.manager_auditActivity({
        id: e,
        status: -1,
        reason: this.refuseReason,
      });
      if (res.code !== 0) return null;
      this.$router.go(0);
    },
    async handleGetMore (e) {
      const res = await this.$http.activityInfo(e);
      if (res.code !== 0) return null;
    },
    toEditActivity (info) {
      this.$router.push({
        name: "addActivity",
        params: {
          ...info,
          isEdit: true,
        },
      });
    },

  },
};
</script>

<style lang="less" scoped>
.commodity-img {
  width: 40px;
}

.el-table {
  margin-top: 20px;
}
</style>
